<template>
    <div>
        <button :class="{ active: currName == name }" v-for="name in names" @click="changeTab(name)" :key="name">
            {{ name }}
        </button>
        <!-- <template v-if="currName == 'AppLeft'">
            <AppLeft :students="students"></AppLeft>
        </template>
        <template v-else-if="currName == 'AppCenter'">
            <AppCenter :students="students"></AppCenter>
        </template>
        <template v-else>
            <AppRight :students="students"></AppRight>
        </template> -->
        <component :is="currName" :students="students"></component>
    </div>
</template>

<script>
import AppCenter from './components/AppCenter.vue';
import AppLeft from './components/AppLeft.vue';
import AppRight from './components/AppRight.vue';


export default {
    data() {
        return {
            names: ['AppLeft', 'AppCenter', 'AppRight'],
            currName: 'AppLeft',
            students: [
                { id: 1, name: '小明', age: 22, gender: '男' },
                { id: 2, name: '小华', age: 33, gender: '女' },
                { id: 1, name: '小花', age: 28, gender: '男' },
            ]
        };
    },
    methods: {
        changeTab(name) {
            this.currName = name;
        }
    },
    components: { AppLeft, AppCenter, AppRight }
}
</script>

<style scoped>
.active {
    color: red;
}
</style>